<!--
  子窗口组件
  
  专门用于演示多窗口间广播通信的子窗口
  可以与主窗口进行实时消息交换
-->

<template>
  <div class="child-window">
    <!-- 窗口头部 -->
    <div class="window-header">
      <h2>🪟 子窗口 - 广播通信演示</h2>
      <p class="subtitle">这是一个独立的子窗口，可以与主窗口进行实时通信</p>
      <div class="window-controls">
        <button @click="closeWindow" class="btn btn-danger">关闭窗口</button>
        <button @click="minimizeWindow" class="btn btn-secondary">最小化</button>
      </div>
    </div>

    <!-- 广播通信区域 -->
    <div class="communication-area">
      
      <!-- 发送消息区域 -->
      <div class="send-section">
        <h3>📤 发送广播消息</h3>
        <div class="message-form">
          <div class="form-group">
            <label>消息类型：</label>
            <select v-model="messageType" class="input">
              <option value="chat">💬 聊天消息</option>
              <option value="notification">🔔 通知消息</option>
              <option value="status">📊 状态更新</option>
              <option value="alert">⚠️ 警告消息</option>
              <option value="custom">🎯 自定义消息</option>
            </select>
          </div>
          
          <div class="form-group">
            <label>消息内容：</label>
            <textarea 
              v-model="messageContent" 
              class="textarea"
              placeholder="输入要发送的消息内容..."
              rows="3"
            ></textarea>
          </div>
          
          <div class="form-group" v-if="messageType === 'custom'">
            <label>自定义频道：</label>
            <input 
              v-model="customChannel" 
              class="input"
              placeholder="输入自定义频道名称..."
            >
          </div>
          
          <button @click="sendMessage" class="btn btn-primary btn-send">
            发送到所有窗口
          </button>
          <button @click="addTestMessage" class="btn btn-success btn-send">
            🧪 添加测试消息
          </button>
        </div>
      </div>

      <!-- 接收消息区域 -->
      <div class="receive-section">
        <h3>📥 接收到的广播消息</h3>
        <div class="message-filters">
          <label>
            <input type="checkbox" v-model="filterOptions.showChat">
            💬 聊天消息
          </label>
          <label>
            <input type="checkbox" v-model="filterOptions.showNotification">
            🔔 通知消息
          </label>
          <label>
            <input type="checkbox" v-model="filterOptions.showStatus">
            📊 状态更新
          </label>
          <label>
            <input type="checkbox" v-model="filterOptions.showAlert">
            ⚠️ 警告消息
          </label>
          <label>
            <input type="checkbox" v-model="filterOptions.showCustom">
            🎯 自定义消息
          </label>
          <button @click="clearMessages" class="btn btn-warning btn-sm">清空消息</button>
        </div>
        
        <div class="message-list">
          <!-- 综合调试信息 -->
          <div class="debug-info">
            <h4><strong>🔍 综合诊断信息</strong></h4>
            
            <div class="debug-section">
              <p><strong>📊 消息统计:</strong></p>
              <p>总消息数: {{ receivedMessages.length }}</p>
              <p>过滤后消息数: {{ filteredMessages.length }}</p>
              <p>页面加载时间: {{ windowCreatedTime.toLocaleTimeString() }}</p>
            </div>
            
            <div class="debug-section">
              <p><strong>🔧 API 可用性:</strong></p>
              <p>window.api: {{ apiStatus.windowApi }}</p>
              <p>broadcast: {{ apiStatus.broadcast }}</p>
              <p>broadcast.send: {{ apiStatus.broadcastSend }}</p>
              <p>broadcast.on: {{ apiStatus.broadcastOn }}</p>
            </div>
            
            <div class="debug-section">
              <p><strong>🎯 监听器状态:</strong></p>
              <p>已设置监听器: {{ debugInfo.listenersSet ? '是' : '否' }}</p>
              <p>监听器数量: {{ debugInfo.listenerCount }}</p>
              <p>设置时间: {{ debugInfo.setupTime || '未设置' }}</p>
            </div>
            
            <div class="debug-section">
              <p><strong>📡 消息过滤器:</strong></p>
              <p>聊天:{{ filterOptions.showChat }}, 通知:{{ filterOptions.showNotification }}, 
                 状态:{{ filterOptions.showStatus }}, 警告:{{ filterOptions.showAlert }}, 
                 自定义:{{ filterOptions.showCustom }}
              </p>
            </div>
            
            <div class="debug-section">
              <p><strong>🌍 窗口信息:</strong></p>
              <p>URL: {{ debugInfo.currentUrl }}</p>
              <p>URL参数: {{ debugInfo.urlParams }}</p>
              <p>Hash: {{ debugInfo.hash }}</p>
            </div>
            
            <div class="debug-actions">
              <button @click="testApiAvailability" class="btn btn-info btn-sm">🔍 测试API</button>
              <button @click="forceRefreshListeners" class="btn btn-warning btn-sm">🔄 重置监听器</button>
              <button @click="logAllDebugInfo" class="btn btn-secondary btn-sm">📝 输出日志</button>
            </div>
          </div>
          
          <div v-if="filteredMessages.length === 0" class="empty-message">
            还没有收到任何广播消息
            <div v-if="receivedMessages.length > 0" style="color: orange; margin-top: 10px;">
              注意：有 {{ receivedMessages.length }} 条消息被过滤器隐藏
            </div>
          </div>
          <div 
            v-for="(msg, index) in filteredMessages" 
            :key="index"
            :class="['message-item', `type-${msg.type}`]"
          >
            <div class="message-header">
              <span class="message-type">{{ getMessageTypeIcon(msg.type) }} {{ getMessageTypeName(msg.type) }}</span>
              <span class="message-time">{{ formatTime(msg.time) }}</span>
            </div>
            <div class="message-content">{{ msg.content }}</div>
            <div v-if="msg.channel" class="message-channel">频道: {{ msg.channel }}</div>
          </div>
        </div>
      </div>

      <!-- 窗口状态区域 -->
      <div class="status-section">
        <h3>📊 窗口状态信息</h3>
        <div class="status-grid">
          <div class="status-item">
            <span class="label">窗口ID:</span>
            <span class="value">{{ windowInfo.id }}</span>
          </div>
          <div class="status-item">
            <span class="label">窗口标题:</span>
            <span class="value">{{ windowInfo.title }}</span>
          </div>
          <div class="status-item">
            <span class="label">发送消息数:</span>
            <span class="value">{{ sentMessageCount }}</span>
          </div>
          <div class="status-item">
            <span class="label">接收消息数:</span>
            <span class="value">{{ receivedMessages.length }}</span>
          </div>
          <div class="status-item">
            <span class="label">窗口创建时间:</span>
            <span class="value">{{ formatTime(windowCreatedTime) }}</span>
          </div>
          <div class="status-item">
            <span class="label">在线时长:</span>
            <span class="value">{{ onlineDuration }}</span>
          </div>
        </div>
        
        <div class="quick-actions">
          <h4>快捷操作</h4>
          <div class="action-buttons">
            <button @click="sendQuickMessage('ping')" class="btn btn-info btn-sm">发送Ping</button>
            <button @click="sendQuickMessage('heartbeat')" class="btn btn-success btn-sm">发送心跳</button>
            <button @click="sendQuickMessage('hello')" class="btn btn-primary btn-sm">问候消息</button>
            <button @click="sendQuickMessage('goodbye')" class="btn btn-warning btn-sm">告别消息</button>
            <button @click="requestWindowList" class="btn btn-secondary btn-sm">获取窗口列表</button>
          </div>
        </div>
      </div>

    </div>

    <!-- 提示消息 -->
    <div v-if="toast.message" :class="['toast', toast.type]">
      {{ toast.message }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 响应式数据
const messageType = ref('chat')
const messageContent = ref('')
const customChannel = ref('')
const sentMessageCount = ref(0)
const windowCreatedTime = ref(new Date())
const onlineDuration = ref('')

const receivedMessages = ref<Array<{
  type: string
  content: string
  channel?: string
  time: Date
}>>([])

const filterOptions = ref({
  showChat: true,
  showNotification: true,
  showStatus: true,
  showAlert: true,
  showCustom: true
})

const windowInfo = ref({
  id: 'child-window',
  title: '子窗口'
})

const toast = ref({
  message: '',
  type: 'info'
})

// 调试信息
const debugInfo = ref({
  listenersSet: false,
  listenerCount: 0,
  setupTime: '',
  currentUrl: '',
  urlParams: '',
  hash: '',
  lastError: ''
})

// 定时器
let durationTimer: NodeJS.Timeout | null = null

// 计算属性
const filteredMessages = computed(() => {
  return receivedMessages.value.filter(msg => {
    switch (msg.type) {
      case 'chat':
        return filterOptions.value.showChat
      case 'notification':
        return filterOptions.value.showNotification
      case 'status':
        return filterOptions.value.showStatus
      case 'alert':
        return filterOptions.value.showAlert
      case 'custom':
        return filterOptions.value.showCustom
      default:
        return true
    }
  })
})

// API状态检查
const apiStatus = computed(() => {
  return {
    windowApi: typeof window?.api,
    broadcast: typeof window?.api?.broadcast,
    broadcastSend: typeof window?.api?.broadcast?.send,
    broadcastOn: typeof window?.api?.broadcast?.on
  }
})

// 方法

/**
 * 发送广播消息
 */
const sendMessage = () => {
  if (!messageContent.value.trim()) {
    showToast('请输入消息内容', 'warning')
    return
  }

  const channel = messageType.value === 'custom' ? customChannel.value : messageType.value
  if (messageType.value === 'custom' && !customChannel.value.trim()) {
    showToast('请输入自定义频道名称', 'warning')
    return
  }

  const messageData = {
    type: messageType.value,
    content: messageContent.value,
    channel: channel,
    sender: 'child-window',
    timestamp: new Date().toISOString()
  }

  // 发送广播消息
  window.api.broadcast.send(channel, messageData)
  
  sentMessageCount.value++
  showToast(`消息已发送到频道: ${channel}`, 'success')
  
  // 清空输入
  messageContent.value = ''
  if (messageType.value === 'custom') {
    customChannel.value = ''
  }
}

/**
 * 发送快捷消息
 */
const sendQuickMessage = (type: string) => {
  const messages = {
    ping: 'Ping! 我是子窗口，主窗口收到了吗？',
    heartbeat: '心跳检测 - 子窗口运行正常',
    hello: '你好！这是来自子窗口的问候！',
    goodbye: '子窗口即将关闭，再见！'
  }

  const content = messages[type as keyof typeof messages] || '快捷消息'
  
  window.api.broadcast.send('quick-message', {
    type,
    content,
    sender: 'child-window',
    timestamp: new Date().toISOString()
  })
  
  sentMessageCount.value++
  showToast(`已发送${type}消息`, 'success')
}

/**
 * 请求窗口列表
 */
const requestWindowList = async () => {
  try {
    const windows = await window.api.window.getList()
    window.api.broadcast.send('window-list-response', {
      windows,
      sender: 'child-window',
      timestamp: new Date().toISOString()
    })
    showToast('窗口列表已发送', 'info')
  } catch (error) {
    showToast('获取窗口列表失败', 'error')
  }
}

/**
 * 关闭窗口
 */
const closeWindow = () => {
  sendQuickMessage('goodbye')
  setTimeout(() => {
    window.api.window.close()
  }, 500)
}

/**
 * 最小化窗口
 */
const minimizeWindow = () => {
  window.api.window.minimize()
}

/**
 * 测试API可用性
 */
const testApiAvailability = () => {
  console.log('[子窗口] 🔍 开始API可用性测试')
  
  const results = {
    windowExists: typeof window !== 'undefined',
    apiExists: typeof window.api !== 'undefined',
    broadcastExists: typeof window.api?.broadcast !== 'undefined',
    sendExists: typeof window.api?.broadcast?.send === 'function',
    onExists: typeof window.api?.broadcast?.on === 'function'
  }
  
  console.log('[子窗口] 📊 API测试结果:', results)
  
  if (!results.apiExists) {
    showToast('❌ window.api 不存在！', 'error')
    alert('严重错误：window.api 不存在，preload脚本可能没有加载！')
  } else if (!results.broadcastExists) {
    showToast('❌ broadcast API 不存在！', 'error')
  } else if (!results.sendExists || !results.onExists) {
    showToast('❌ broadcast 方法不完整！', 'error')
  } else {
    showToast('✅ API测试通过！', 'success')
  }
  
  return results
}

/**
 * 强制刷新监听器
 */
const forceRefreshListeners = () => {
  console.log('[子窗口] 🔄 强制重置监听器')
  
  try {
    // 清理现有监听器
    const messageTypes = ['chat', 'notification', 'status', 'alert', 'custom', 'quick-message', 'window-list-response', 'child-window-ready']
    messageTypes.forEach(type => {
      if (window.api?.broadcast?.off) {
        window.api.broadcast.off(type)
      }
    })
    
    debugInfo.value.listenersSet = false
    debugInfo.value.listenerCount = 0
    
    // 重新设置监听器
    setTimeout(() => {
      setupBroadcastListeners()
      showToast('✅ 监听器已重置', 'success')
    }, 100)
    
  } catch (error) {
    console.error('[子窗口] ❌ 重置监听器失败:', error)
    debugInfo.value.lastError = (error as Error).toString()
    showToast('❌ 重置监听器失败', 'error')
  }
}

/**
 * 输出完整调试日志
 */
const logAllDebugInfo = () => {
  console.log('[子窗口] 📝 ===== 完整调试信息 =====')
  console.log('[子窗口] 📊 消息数据:', {
    总消息数: receivedMessages.value.length,
    过滤后数量: filteredMessages.value.length,
    消息列表: receivedMessages.value
  })
  console.log('[子窗口] 🔧 API状态:', {
    'window.api': typeof window.api,
    'broadcast': typeof window.api?.broadcast,
    'send方法': typeof window.api?.broadcast?.send,
    'on方法': typeof window.api?.broadcast?.on
  })
  console.log('[子窗口] 🎯 调试信息:', debugInfo.value)
  console.log('[子窗口] 📡 过滤器:', filterOptions.value)
  console.log('[子窗口] 🌍 窗口信息:', {
    URL: window.location.href,
    参数: new URLSearchParams(window.location.search),
    Hash: window.location.hash
  })
  console.log('[子窗口] 📝 ===== 调试信息结束 =====')
  
  showToast('📝 调试信息已输出到控制台', 'info')
}

/**
 * 设置广播监听器
 */
const setupBroadcastListeners = () => {
  const messageTypes = ['chat', 'notification', 'status', 'alert', 'custom', 'quick-message', 'window-list-response', 'child-window-ready']
  
  if (window.api?.broadcast?.on) {
    messageTypes.forEach(type => {
      console.log(`[子窗口] 🎧 设置监听器: ${type}`)
      try {
        window.api.broadcast.on(type, (data) => {
          console.log(`[子窗口] 📨 收到广播消息 - 类型: ${type}, 发送者: ${data?.sender || 'unknown'}`)
          console.log(`[子窗口] 📨 消息内容:`, data)
          
          // 不接收自己发送的消息
          if (data?.sender !== 'child-window') {
            const newMessage = {
              type: data?.type || type,
              content: data?.content || JSON.stringify(data),
              channel: data?.channel || type,
              time: new Date(data?.timestamp || new Date())
            }
            
            console.log(`[子窗口] 📝 准备添加消息:`, newMessage)
            
            // 添加新消息到数组开头
            receivedMessages.value.unshift(newMessage)
            
            // 只保留最近50条消息
            if (receivedMessages.value.length > 50) {
              receivedMessages.value.pop()
            }
            
            console.log(`[子窗口] ✅ 消息已添加到列表`)
            console.log(`[子窗口] 📊 当前消息数: ${receivedMessages.value.length}`)
            console.log(`[子窗口] 🔍 过滤后消息数: ${filteredMessages.value.length}`)
            
            // 显示临时通知确认消息已收到
            showToast(`收到${getMessageTypeName(newMessage.type)}消息`, 'success')
          } else {
            console.log(`[子窗口] ⏭️ 跳过自己发送的消息`)
          }
        })
        
        debugInfo.value.listenerCount++
        console.log(`[子窗口] ✅ 监听器设置成功: ${type}`)
      } catch (error) {
        console.error(`[子窗口] ❌ 设置监听器失败 (${type}):`, error)
        debugInfo.value.lastError = (error as Error).toString()
      }
    })
    
    debugInfo.value.listenersSet = true
    debugInfo.value.setupTime = new Date().toLocaleTimeString()
  } else {
    console.error('[子窗口] ❌ broadcast.on 方法不可用，无法设置监听器')
    debugInfo.value.lastError = 'broadcast.on 方法不可用'
  }
}

/**
 * 添加测试消息（用于UI测试）
 */
const addTestMessage = () => {
  console.log('[子窗口] 🧪 手动添加测试消息')
  
  const testMessage = {
    type: 'chat',
    content: '这是一条UI测试消息 - ' + new Date().toLocaleTimeString(),
    channel: 'test',
    time: new Date()
  }
  
  console.log('[子窗口] 📝 测试消息内容:', testMessage)
  
  receivedMessages.value.unshift(testMessage)
  
  console.log(`[子窗口] ✅ 测试消息已添加，当前消息数: ${receivedMessages.value.length}`)
  console.log(`[子窗口] 🔍 过滤后消息数: ${filteredMessages.value.length}`)
  
  showToast('测试消息已添加', 'success')
}

/**
 * 清空消息
 */
const clearMessages = () => {
  receivedMessages.value = []
  showToast('消息已清空', 'info')
}

/**
 * 获取消息类型图标
 */
const getMessageTypeIcon = (type: string): string => {
  const icons = {
    chat: '💬',
    notification: '🔔',
    status: '📊',
    alert: '⚠️',
    custom: '🎯',
    'quick-message': '⚡',
    'window-list-response': '📋'
  }
  return icons[type as keyof typeof icons] || '📝'
}

/**
 * 获取消息类型名称
 */
const getMessageTypeName = (type: string): string => {
  const names = {
    chat: '聊天消息',
    notification: '通知消息',
    status: '状态更新',
    alert: '警告消息',
    custom: '自定义消息',
    'quick-message': '快捷消息',
    'window-list-response': '窗口列表'
  }
  return names[type as keyof typeof names] || '未知消息'
}

/**
 * 格式化时间
 */
const formatTime = (date: Date): string => {
  return date.toLocaleString('zh-CN')
}

/**
 * 更新在线时长
 */
const updateDuration = () => {
  const now = new Date()
  const diff = now.getTime() - windowCreatedTime.value.getTime()
  const seconds = Math.floor(diff / 1000)
  const minutes = Math.floor(seconds / 60)
  const hours = Math.floor(minutes / 60)
  
  if (hours > 0) {
    onlineDuration.value = `${hours}小时${minutes % 60}分钟`
  } else if (minutes > 0) {
    onlineDuration.value = `${minutes}分钟${seconds % 60}秒`
  } else {
    onlineDuration.value = `${seconds}秒`
  }
}

/**
 * 显示提示消息
 */
const showToast = (message: string, type: string = 'info') => {
  toast.value = { message, type }
  setTimeout(() => {
    toast.value.message = ''
  }, 3000)
}

// 生命周期
onMounted(() => {
  console.log('[子窗口] ==== 页面初始化开始 ====')
  
  // 收集调试信息
  debugInfo.value.currentUrl = window.location.href
  debugInfo.value.urlParams = window.location.search
  debugInfo.value.hash = window.location.hash
  
  console.log('[子窗口] 🌍 窗口信息:', {
    URL: debugInfo.value.currentUrl,
    参数: debugInfo.value.urlParams,
    Hash: debugInfo.value.hash
  })
  
  // 自动测试API可用性
  console.log('[子窗口] 🔍 自动API可用性测试')
  testApiAvailability()
  
  // 设置广播监听器
  console.log('[子窗口] 📡 开始设置广播监听器')
  setupBroadcastListeners()
  
  // 先测试一个简单的广播消息
  console.log('[子窗口] 📤 发送子窗口准备就绪消息')
  try {
    if (window.api?.broadcast?.send) {
      window.api.broadcast.send('child-window-ready', {
        message: '子窗口已准备就绪',
        sender: 'child-window',
        timestamp: new Date().toISOString()
      })
      console.log('[子窗口] ✅ 准备就绪消息发送成功')
    } else {
      console.error('[子窗口] ❌ 无法发送准备就绪消息 - broadcast.send 不可用')
      debugInfo.value.lastError = 'broadcast.send 不可用'
    }
  } catch (error) {
    console.error('[子窗口] ❌ 发送准备就绪消息失败:', error)
    debugInfo.value.lastError = (error as Error).toString()
  }
  
  console.log('[子窗口] ==== 页面初始化完成 ====')
  console.log('[子窗口] 📊 调试信息汇总:', debugInfo.value)

  // 启动在线时长定时器
  durationTimer = setInterval(updateDuration, 1000)
  
  // 发送窗口创建通知
  setTimeout(() => {
    sendQuickMessage('hello')
  }, 1000)
  
  showToast('子窗口已就绪，可以开始通信！', 'success')
})

onUnmounted(() => {
  console.log('[子窗口] 🧹 开始清理资源')
  
  // 清理定时器
  if (durationTimer) {
    clearInterval(durationTimer)
    console.log('[子窗口] ✅ 定时器已清理')
  }
  
  // 清理监听器
  try {
    const messageTypes = ['chat', 'notification', 'status', 'alert', 'custom', 'quick-message', 'window-list-response', 'child-window-ready']
    messageTypes.forEach(type => {
      if (window.api?.broadcast?.off) {
        window.api.broadcast.off(type)
      }
    })
    console.log('[子窗口] ✅ 广播监听器已清理')
  } catch (error) {
    console.error('[子窗口] ❌ 清理监听器失败:', error)
  }
  
  console.log('[子窗口] 🧹 资源清理完成')
})
</script>

<style scoped>
.child-window {
  min-height: 100vh;
  height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
  overflow-y: auto;
}

.debug-info {
  background: #fffbf0;
  border: 2px solid #ffd700;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  font-family: monospace;
  font-size: 13px;
}

.debug-info p {
  margin: 5px 0;
  color: #333;
}

.debug-info strong {
  color: #d2691e;
}

.debug-section {
  margin-bottom: 15px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #007bff;
}

.debug-section p {
  margin: 3px 0;
  font-size: 12px;
}

.debug-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 15px;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 11px;
}

.btn-info {
  background: #17a2b8;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-info:hover {
  background: #138496;
}

.btn-secondary {
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background: #545b62;
}

.window-header {
  text-align: center;
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.window-header h2 {
  margin: 0 0 10px 0;
  font-size: 2em;
}

.subtitle {
  margin: 0 0 20px 0;
  opacity: 0.9;
}

.window-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.communication-area {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}

.send-section, .receive-section, .status-section {
  background: rgba(255, 255, 255, 0.1);
  padding: 25px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.send-section h3, .receive-section h3, .status-section h3 {
  margin: 0 0 20px 0;
  color: #fff;
}

.message-form {
  display: grid;
  gap: 15px;
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  color: #f0f0f0;
}

.input, .textarea {
  padding: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
  backdrop-filter: blur(5px);
}

.input::placeholder, .textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.input:focus, .textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.2);
}

.btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-primary {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  color: white;
}

.btn-secondary {
  background: linear-gradient(45deg, #757575, #616161);
  color: white;
}

.btn-danger {
  background: linear-gradient(45deg, #f44336, #d32f2f);
  color: white;
}

.btn-warning {
  background: linear-gradient(45deg, #ff9800, #f57c00);
  color: white;
}

.btn-info {
  background: linear-gradient(45deg, #2196F3, #1976D2);
  color: white;
}

.btn-success {
  background: linear-gradient(45deg, #4CAF50, #388E3C);
  color: white;
}

.btn-send {
  justify-self: center;
  min-width: 200px;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 12px;
}

.message-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.message-filters label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}

.message-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.empty-message {
  text-align: center;
  padding: 40px;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

.message-item {
  padding: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}

.message-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.message-item:last-child {
  border-bottom: none;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.message-type {
  font-weight: 600;
  color: #90caf9;
}

.message-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.message-content {
  margin-bottom: 5px;
  line-height: 1.4;
}

.message-channel {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.label {
  font-weight: 600;
  color: #e3f2fd;
}

.value {
  color: #90caf9;
}

.quick-actions h4 {
  margin: 0 0 15px 0;
  color: #fff;
}

.action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 25px;
  border-radius: 8px;
  font-weight: 600;
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

.toast.info {
  background: #2196F3;
  color: white;
}

.toast.success {
  background: #4CAF50;
  color: white;
}

.toast.warning {
  background: #ff9800;
  color: white;
}

.toast.error {
  background: #f44336;
  color: white;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .child-window {
    padding: 15px;
  }
  
  .window-controls {
    flex-direction: column;
  }
  
  .message-filters {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .action-buttons {
    justify-content: center;
  }
  
  .status-grid {
    grid-template-columns: 1fr;
  }
}

/* 滚动条样式 */
.message-list::-webkit-scrollbar {
  width: 8px;
}

.message-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.message-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.message-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
</style>
